<template>
  <div>
      <!-- <el-select :style="{width:width}" @change="changevt" @dblclick.native="popbigtab" placeholder="请选择" ref="ddlrptitemSelect" v-model="myvalue">
          <el-option :key="item.rpt_itemcode" :label="item.rpt_itemname" :value="item.rpt_itemcode" v-for="item in seloptions">
              <span style="float: left">{{ item.rpt_itemname }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.rpt_itemcode }}</span>
          </el-option>
      </el-select>-->
      <el-input :style="{width:width}" @keyup.space.native="popbigtab" @dblclick.native="popbigtab" readonly clearable placeholder="请选择报告项目" ref="ddlrptitemSelect" @clear="clear" v-model="showtxt">
          <i @click="popbigtab" class="el-input__icon el-icon-menu" slot="suffix"></i>
      </el-input>
      <el-dialog v-el-drag-dialog :append-to-body="appendtobody" :close-on-click-modal="false" :visible.sync="dialogTableVisible" title="请选择报告项目" top="5vh" width="800px">
          <el-container style="height:550px; border: 1px solid #eee">
              <el-main style="overflow: hidden;">
                  <table style="width:100%; font-size:12px;">
                      <tr v-if="germmode">
                          <td style="height:26px; padding-left:60px; " colspan="4">
                              <el-radio-group @change="germflagchange" v-model="germflag">
                                  <el-radio :label="4">涂片结果</el-radio>
                                  <el-radio :label="1">阴性结果</el-radio>
                                  <el-radio :label="2">致病菌</el-radio>
                                  <el-radio :label="3">正常菌种</el-radio>
                                  <el-radio :label="5">细菌其他</el-radio>
                                  <el-radio :label="99">全部</el-radio>
                              </el-radio-group>
                          </td>
                      </tr>
                      <tr v-else>
                          <td style="max-width:60px;min-width:60px;">报告单元</td>
                          <td style="width:50%;">
                              <rm-ddl-rptunit :prgno="prgno" :appendtobody="true" :disabled="rptunitdisabled" @change="handlerptunitchange" v-model="myrptunitid" width="100%"></rm-ddl-rptunit>
                          </td>
                          <td style="max-width:60px;min-width:60px;">项目分类</td>
                          <td style="width:50%;">
                              <rm-ddl-rptitemclass @change="handleitemclasschange" v-model="myitemclass" width="100%"></rm-ddl-rptitemclass>
                          </td>
                      </tr>
                      <tr>
                          <td colspan="4">
                              <el-input @keydown.native="searchkeydown" @input="autosearch" placeholder="快速检索" prefix-icon="el-icon-search" ref="qcodeinput" style="width:300px" v-model="qcode">
                              </el-input>
                              <el-button @click="dialogTableVisible = false" icon="el-icon-circle-close" style="float:right; margin-left:10px;" type="primary">取消</el-button>
                              <el-button @click="btnok" icon="el-icon-circle-check" style="float:right; margin -right:10px;" type="primary">确定</el-button>
                              <el-button @click="refreshdata" icon="el-icon-refresh" style="float:right" type="primary">刷新数据</el-button>
                          </td>
                      </tr>
                  </table>
                  <vxe-grid :columns="tableColumn" :display-pager="false" :pager-config="tablePage" :data="tableData" @cell-dblclick="vxselect" border height="488px" highlight-current-row
                      highlight-hover-row ref="ddlrptitemTable" resizable size="mini" stripe></vxe-grid>
              </el-main>
          </el-container>
      </el-dialog>
  </div>
</template>
<script>
export default {
  //props: ["width", "value", "rptunitid", "germmode", "isAllRpt", "itemclass", "rptunitdisabled", "appendtobody", "prgno"],
  props: {
      width: { type: String, default: "200px" },
      value: [Number, String],
      rptunitid: [Number, String],
      germmode: { type: Boolean, default: false },
      isAllRpt: { type: String, default: "0" },
      itemclass: { type: String },
      rptunitdisabled: { type: Boolean, default: false },
      appendtobody: { type: Boolean, default: true },
      prgno: { type: String },
      mutex_rpt_itemcode: { type: String, default: "mutex_rpt_itemcode" },
  },
  watch: {
      value(newVal) {
          if (newVal != "") {
              this.showtxt = this.findname(newVal)
          } else {
              this.showtxt = ""
          }
      },
      myvalue(newVal) {
          this.$emit("input", newVal)
      },
      rptunitid(val) {
          if (val == "" || isNaN(val)) {
              this.myrptunitid = null
          } else {
              var intval = parseInt(val)
              this.myrptunitid = intval
          }
          this.filterdata()
      },
  },
  data() {
      return {
          dialogx: false,
          myvalue: this.value,
          showtxt: "",
          fulldata: null,
          myrptunitid: this.rptunitid,
          myitemclass: this.itemclass,
          germflag: 99,
          //oldmyrptunitid: myrptunitid,
          //oldmyitemclass: myitemclass,
          selrow: null,
          qcode: "",
          clsMenus: [],
          tableColumn: [],
          tablePage: {
              pageSize: 1000,
          },
          tableData: [],
          seloptions: [],
          dialogTableVisible: false,
      }
  },
  computed: {
      myappendtobody: function () {
          return this.appendtobody
      },
  },
  updated() {
      if (this.$refs.qcodeinput) {
          this.$refs.qcodeinput.focus()
      }
      this.$nextTick(() => {
          this.rptunitid = this.rptunitid
      })
  },
  methods: {
      clear: function () {
          this.myvalue = ""
          this.value = ""
          this.$emit("change", "", "")
          this.$emit("changeObj", {code:'', name:'', row:""});
      },
      autosearch: function (evt) {
          if (evt.keyCode != 13 && evt.keyCode != 40 && evt.keyCode != 38) {
              this.filterdata()
          }
      },
      germflagchange: function () {
          this.filterdata()
      },
      changeactiverow: function (cindex) {
          var row = this.$refs.ddlrptitemTable.getCurrentRow()
          var ridx = this.$refs.ddlrptitemTable.getRowIndex(row)
          var newidx = ridx + cindex
          if (newidx < 0) newidx = 0
          if (newidx >= this.tableData.length) {
              newidx = 0
          }
          var newrow = this.tableData[newidx]
          this.$refs.ddlrptitemTable.setCurrentRow(newrow)
          // this.$refs.ddlrptitemTable.scrollToRow(newrow);
          this.$nextTick(() => {
              if (this.$refs.ddlrptitemTable) {
                  var crow = this.$refs.ddlrptitemTable.getCurrentRow()
                  this.$refs.ddlrptitemTable.scrollToRow(crow)
              }
          })
      },
      searchkeydown: function (evt) {
          if (evt.keyCode == 13) {
              this.myvalue = this.$refs.ddlrptitemTable.getCurrentRow().rpt_itemcode
              this.dialogTableVisible = false
              this.$nextTick(() => {
                  this.$refs.ddlrptitemSelect.focus()
                  this.$emit(
                      "change",
                      this.myvalue,
                      this.$refs.ddlrptitemTable.getCurrentRow().rpt_itemname
                  )
              })
          } else if (evt.keyCode == 40) {
              var cindex = 1
              this.changeactiverow(cindex)
          } else if (evt.keyCode == 38) {
              var cindex = -1
              this.changeactiverow(cindex)
          }
      },
      handlerptunitchange: function (val) {
          this.myrptunitid = val
          this.filterdata()
      },
      handleitemclasschange: function (val, sobj) {
          this.myitemclass = val
          this.filterdata()
      },
      popbigtab: function (evt) {
          this.$refs.ddlrptitemSelect.blur()
          this.dialogTableVisible = true
          this.filterdata()
      },
      async filterdata() {
          try {
              if (this.germmode) {
                  var cData = await this.$ddldata.getallrptitem()
                  if (this.germflag == 99) {
                      cData = cData.filter((item) => item.germflagid != "0")
                  } else {
                      cData = cData.filter(
                          (item) => item.germflagid == this.germflag
                      )
                  }
                  if (this.qcode != "") {
                      cData = cData.filter(
                          (item) =>
                              item.rpt_itemcode
                                  .toUpperCase()
                                  .indexOf(this.qcode.toUpperCase()) > -1 ||
                              item.rpt_itemname
                                  .toUpperCase()
                                  .indexOf(this.qcode.toUpperCase()) > -1 ||
                              item.inputcode
                                  .toUpperCase()
                                  .indexOf(this.qcode.toUpperCase()) > -1 ||
                              item.itemcode_en
                                  .toUpperCase()
                                  .indexOf(this.qcode.toUpperCase()) > -1
                      )
                  }
                  if (cData.length > 0) {
                      this.selrow = cData[0]
                  } else {
                      this.selrow == null
                  }
                  if (this.mutex_rpt_itemcode != "mutex_rpt_itemcode") {
                      //互斥项目的显示要剔除当前项目
                      this.tableData = cData.filter(
                          (item) =>
                              item.rpt_itemcode != this.mutex_rpt_itemcode
                      )
                  } else {
                      this.tableData = cData
                  }

                  this.$nextTick(() => {
                      if (this.$refs.ddlrptitemTable) {
                          if (this.selrow) {
                              this.$refs.ddlrptitemTable.setCurrentRow(
                                  this.selrow
                              )
                          }
                      }
                  })
              } else {
                  if (this.myrptunitid && this.myrptunitid != 0) {
                      var cData = await this.$ddldata.getrptunititem(
                          this.myrptunitid
                      )
                  } else {
                      cData = await this.$ddldata.getitem(this.isAllRpt)
                  }
                  if (this.myitemclass && this.myitemclass != "") {
                      cData = cData.filter(
                          (item) =>
                              item.itemclasscode == this.myitemclass ||
                              item.parentclasscode == this.myitemclass
                      )
                  }
                  if (this.qcode != "") {
                      cData = cData.filter(
                          (item) =>
                              item.rpt_itemcode
                                  .toUpperCase()
                                  .indexOf(this.qcode.toUpperCase()) > -1 ||
                              item.rpt_itemname
                                  .toUpperCase()
                                  .indexOf(this.qcode.toUpperCase()) > -1 ||
                              item.inputcode
                                  .toUpperCase()
                                  .indexOf(this.qcode.toUpperCase()) > -1 ||
                              item.itemcode_en
                                  .toUpperCase()
                                  .indexOf(this.qcode.toUpperCase()) > -1
                      )
                  }

                  if (cData.length > 0) {
                      this.selrow = cData[0]
                  } else {
                      this.selrow == null
                  }
                  if (this.mutex_rpt_itemcode != "mutex_rpt_itemcode") {
                      //互斥项目的显示要剔除当前项目
                      this.tableData = cData.filter(
                          (item) =>
                              item.rpt_itemcode != this.mutex_rpt_itemcode
                      )
                  } else {
                      this.tableData = cData
                  }
                  //this.tableData = cData;
                  this.$nextTick(() => {
                      if (this.$refs.ddlrptitemTable) {
                          if (this.selrow) {
                              this.$refs.ddlrptitemTable.setCurrentRow(
                                  this.selrow
                              )
                          }
                      }
                  })
              }
          } catch (e) {
              console.log("erro", e)
          }
      },
      findname(code) {
          let name = code
          if (code != "") {
              let cData = null
              if (this.isAllRpt == "1" || this.germmode) {
                  cData = this.$ddldata.rmallrptitem
              } else {
                  cData = this.$ddldata.rmrptitem
              }
              if (cData) {
                  cData = cData.filter((item) => item.rpt_itemcode === code)
                  if (cData.length > 0) {
                      name = cData[0].rpt_itemname
                  }
              }
          }
          return name
      },
      refreshdata: function () {
          this.$ddldata.rmallrptitem = ""
          this.$ddldata.rmrptitem = ""
          this.$ddldata.rmrptunititem = []
          this.loadAllData()
      },
      async loadAllData() {
          var res = await this.$ddldata.getrmrptitem()
          if (this.value != "") {
              this.showtxt = this.findname(this.value)
          }
          // this.$ddldata
          //     .getrmrptitem()
          //     .then(res => {

          //     })
          //     .catch(e => {
          //         this.$alert("获取数据失败，请刷新浏览器重试", "错误", {
          //             confirmButtonText: "确定"
          //         });
          //     });
      },
      btnok: function () {
          this.myvalue = this.$refs.ddlrptitemTable.getCurrentRow().rpt_itemcode
          this.dialogTableVisible = false
          this.$nextTick(() => {
              this.$refs.ddlrptitemSelect.focus()
              this.$emit(
                  "change",
                  this.myvalue,
                  this.$refs.ddlrptitemTable.getCurrentRow().rpt_itemname
              )
          })
      },
      vxselect: function (data, evt) {
          this.myvalue = data.row.rpt_itemcode
          this.dialogTableVisible = false
          this.dialogx = false
          this.$nextTick(() => {
              this.$refs.ddlrptitemSelect.focus()
              this.$emit("change", this.myvalue, data.row.rpt_itemname)
              this.$emit("changeObj", {code:this.myvalue, name:data.row.rpt_itemname, row:""});
          })
      },
      setcol() {
          if (this.germmode) {
              this.tableColumn = [
                  {
                      field: "itemcode_en",
                      title: "英文缩写",
                      width: 100,
                      sortable: true,
                  },
                  {
                      field: "rpt_itemname",
                      title: "细菌项目名称",
                      width: 200,
                      sortable: true,
                  },
                  {
                      field: "itemname_en",
                      title: "英文名称",
                      width: 200,
                      sortable: true,
                  },
                  {
                      field: "seq",
                      title: "使用频次",
                      width: 80,
                      sortable: true,
                  },
                  {
                      field: "isgermgroup",
                      title: "是否菌属",
                      width: 100,
                      sortable: true,
                      formatter: function ({
                          cellValue,
                          row,
                          rowIndex,
                          column,
                          columnIndex,
                      }) {
                          if (cellValue == "1") return "是"
                          else return ""
                      },
                  },
                  {
                      field: "groupitemcode",
                      title: "所属菌属",
                      width: 100,
                      sortable: true,
                  },
                  {
                      field: "rpt_itemcode",
                      title: "项目代码",
                      width: 100,
                      sortable: true,
                  },
                  {
                      field: "inputcode",
                      title: "助记符",
                      width: 100,
                      sortable: true,
                  },
              ]
          } else {
              this.tableColumn = [
                  {
                      field: "itemclassname",
                      title: "项目归类",
                      width: 100,
                      sortable: true,
                  },
                  {
                      field: "rpt_itemcode",
                      title: "项目代码",
                      width: 100,
                      sortable: true,
                  },
                  {
                      field: "itemcode_en",
                      title: "英文缩写",
                      width: 100,
                      sortable: true,
                  },
                  {
                      field: "rpt_itemname",
                      title: "报告项目名称",
                      width: 200,
                      sortable: true,
                  },
                  {
                      field: "unit",
                      title: "单位",
                      width: 100,
                      sortable: true,
                  },
                  {
                      field: "ref_text",
                      title: "参考值",
                      width: 200,
                      sortable: true,
                  },
                  {
                      field: "itemtips",
                      title: "项目备注",
                      width: 200,
                      sortable: true,
                  },
                  {
                      field: "instrclassname",
                      title: "仪器类别",
                      width: 100,
                      sortable: true,
                  },
                  {
                      field: "inputcode",
                      title: "助记符",
                      width: 100,
                      sortable: true,
                  },
              ]
          }
      },
  },
  mounted() {
      this.loadAllData()
      this.setcol()
  },
}
</script>
<style scoped>
.el-main {
  padding: 0;
}
</style>
